import React, { useState } from "react";
import { Button, message, Modal, Space, Switch, Table, Tooltip } from "antd";

import { Params, RecordItem } from "../type";
import { ColumnsType } from "antd/es/table";
import AddModal from "./AddModal";
import SettingModal from "@/views/AuthManage/UserManage/SettingModal";
import InfoEditModal from "./InfoEditModal";
import AuthModal from "./AuthModal";
import ViewModal from "./ViewModal";
import request from "@/utils/request";

interface Props {
	page: number;
	pageSize: number;
	total: number;
	data: RecordItem[];
	filterData: Params;
	onPageChange: (page: number, pageSize?: number) => void;
	doSearch: (params: Params) => void;
}

const TableData: React.FC<Props> = ({ data, doSearch, page, pageSize, total, onPageChange }) => {
	const [viewVisible, setViewVisible] = useState(false);
	const [authVisible, setAuthVisible] = useState(false);
	const [editVisible, setEditVisible] = useState(false);
	const [selectedRecord, setSelectedRecord] = useState<RecordItem>();

	const changeStatus = (record: RecordItem) => {
		request('tenantUpdateStatus', {
			data: { tenantId: record.tenantId, status: record.status === 1 ? 0 : 1 },
		}).then(res => {
			if (res.code === 0) {
				message.success('更新成功')
				doSearch({} as Params)
			}
		})
	}

	const columns: ColumnsType<RecordItem> = [
		{
			title: "租户标识",
			dataIndex: "tenantId",
			key: "tenantId",
			align: "center"
		},
		{
			title: "系统名称",
			dataIndex: "tenantName",
			key: "tenantName",
			align: "center"
		},
		{
			title: "联系人",
			dataIndex: "phone",
			key: "phone",
			align: "center"
		},
		{
			title: '启用状态',
			dataIndex: 'status',
			width: 90,
			fixed: 'right',
			render(value, record) {
				return <Switch checked={!!value} onChange={() => changeStatus(record)} />
			},
		},
		{
			title: "操作",
			width: 200,
			render: (text: any, record: RecordItem) => {
				return (
					<Space>
						<a className="link" onClick={() => handleViewClick(record)}>
							查看
						</a>
						<a className="link" onClick={() => handleEditClick(record)}>
							修改
						</a>
						<a className="link" onClick={() => handleAuthClick(record)}>
							授权
						</a>
					</Space>
				);
			}
		}
	];

	const handleEditClick = (record: RecordItem) => {
		setSelectedRecord(record);
		setEditVisible(true);
	};

	const handleViewClick = (record: RecordItem) => {
		setSelectedRecord(record);
		setViewVisible(true);
	};

	const handleAuthClick = (record: RecordItem) => {
		setSelectedRecord(record);
		setAuthVisible(true);
	};

	return (
		<div>
			<Space className="mb20 mt12">
				<AddModal doSearch={doSearch}></AddModal>
			</Space>
			<Table
				dataSource={data}
				columns={columns}
				rowKey={record => record.tenantId}
				pagination={{
					total,
					size: "default",
					showSizeChanger: true,
					showQuickJumper: true,
					current: page,
					pageSize: pageSize,
					onChange: onPageChange,
					position: ["bottomRight"]
				}}
			></Table>

			<ViewModal open={viewVisible} selRecord={selectedRecord} onCancel={() => setViewVisible(false)}></ViewModal>
			<AuthModal
				open={authVisible}
				selRecord={selectedRecord}
				onSearch={doSearch}
				onCancel={() => setAuthVisible(false)}
			></AuthModal>
			<InfoEditModal
				open={editVisible}
				selRecord={selectedRecord}
				onSearch={doSearch}
				onCancel={() => setEditVisible(false)}
			></InfoEditModal>
		</div>
	);
};

export default TableData;
